<script src="../ExternalLibrary/js/vue.js"></script>
<!-- 计算属性的目的：简化模板中的JS表达式 -->

<!-------------------------------01.计算属性 start ---------------------------------->
<fieldset>
    <legend>01.计算属性</legend>
    <div id="computed">
        <p>原始信息："{{message}}"</p>
        <p>计算后信息："{{reverseMsg}}"</p><!-- 将函数名当做数据就好了,功能等同于data中的message -->
    </div>
    <script>
        /**
        * 设计模板的目的是用于简单计算的,如果放入过多的逻辑会让模板过重且难以维护
        *   <div id="message">
        *       {{message.split('').reverse().join('')}}
        *   </div>
        *
        * 对于这种复杂逻辑,我们应该使用计算属性
        */
        var vm = new Vue({
            el:"#computed",
            data:{
                message:"hello"
            },
            computed:{
                //相当于getter函数，vm.reverseMsg的结果取决于vm.message的值,可以在控制台改变message的值,查看效果
                reverseMsg:function(){
                    return this.message.split('').reverse().join('');//this指向vm实例
                }
            }
        });
    </script>
</fieldset>
<!-------------------------------01.计算属性 end ---------------------------------->


<!-------------------------------02.计算属性的缓存特性 start ---------------------------------->
<fieldset>
    <legend>02.计算属性的缓存特性</legend>
    <div id="computedCache">
        <p>原始信息："{{message}}"</p>
        <p>计算后信息："{{reverseMsg}}"</p><!-- 将函数名当做数据就好了,功能等同于data中的message -->
    </div>
    <script>
        var vm = new Vue({
            el:"#computedCache",
            data:{
                message:"hello"
            },
            computed:{
                reverseMsg:function(){
                    return Date.now();//this指向vm实例
                }
            }
        });

        /**
        *   总结:计算属性是基于响应式依赖进行缓存的,只有相关依赖(每一个数据项)发生改变时,才会重新求值，
        *       就是说,只要message属性不发生改变,计算属性中的函数就不会执行(官方文档上没有与对象绑定)。
        */
    </script>
</fieldset>
<!-------------------------------02.计算属性的缓存特性 end ---------------------------------->



<!-------------------------------03.计算属性的替代方案 start ---------------------------------->
<fieldset>
    <legend>03.计算属性的替代方案</legend>
    <div id="computedMth">
        <p>原始信息："{{message}}"</p>
        <p>计算后信息："{{reverseMsg()}}"</p><!-- 将函数名当做数据就好了,功能等同于data中的message -->
    </div>
    <script>
        /**
        *   所有通过计算属性得出的结果,都可以通过方法的形式实现
        */
        var oVue = new Vue({
            el:"#computedMth",
            data:{
                message:"world"
            },
            methods:{
                reverseMsg : function(){
                    return this.message.split("").reverse().join("");
                }
            }
        });
    </script>
</fieldset>
<!-------------------------------03.计算属性的替代方案 end ---------------------------------->



<!-------------------------------04.计算属性的getter和setter start ---------------------------------->
<fieldset>
    <legend>04.计算属性的getter和setter</legend>
</fieldset>
<!-------------------------------04.计算属性的getter和setter end ---------------------------------->